<!-- 库存明细 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="list-view">
				<u-scroll-list :indicator="false" class="p-b-0">
					<view class="top-view p-t-20">
						<view class="flex flex-sa f-35 m-b-10">
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总匹数 </view>
								<view class="flex flex-c f-30 m-b-10"> {{totalObj.piecesCount||0}} </view>
							</view>
							<view class="f-35">
								<view class="flex flex-c f-32 text-color"> 总数量 </view>
								<view class="flex flex-c f-30 m-b-10"> {{totalObj.quantity||0}} </view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			<u-sticky offset-top="0" style="z-index: 1;">
				<view class="flex flex-sa nav-view">
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.storeName">
							<text class="m-r-10" style="color: #60b4f6;" @click="toWarehouse">{{params.data.storeName}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="onDel('storeName')"></u-icon>
						</view>
						<view class="flex" v-else @click="toWarehouse">
							<text class="m-r-10" >全部库存</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.name">
							<text class="m-r-10" style="color: #60b4f6;" @click="toProduct">{{params.data.code}} {{params.data.name}}</text>
							<u-icon name="arrow-down-fill" color="#60b4f6" size="10" @click="onDel('prod')"></u-icon>
						</view>
						<view v-else class="flex" @click="toProduct">
							<text class="m-r-10">产品</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.colorNumber">
							<text class="m-r-10" style="color: #60b4f6;" @click="toColor">{{params.data.colorNumber}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="onDel('color')"></u-icon>
						</view>
						<view class="flex" v-else>
							<text class="m-r-10" @click="toColor">颜色</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
				</view>
				<view class="flex flex-sa nav-view">
					<view class="flex flex-c f-28" style="flex: 1;">
						<view class="flex" v-if="params.data.sepc">
							<text class="m-r-10" style="color: #60b4f6;" @click="toSpec">{{params.data.sepc}}</text>
							<u-icon name="close" color="#60b4f6" size="10" @click="onDel('spec')"></u-icon>
						</view>
						<view class="flex" v-else @click="toSpec">
							<text class="m-r-10">规格</text>
							<u-icon name="arrow-down-fill" color="#bbb" size="10"></u-icon>
						</view>
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<input class="inp-view" v-model="params.data.vatNo" type="text" placeholder="缸号" placeholder-style="color: #999;">
					</view>
					<view class="flex flex-c f-28" style="flex: 1;">
						<input class="inp-view" v-model="params.data.sn" type="text" placeholder="批号" placeholder-style="color: #999;">
					</view>
				</view>
			</u-sticky>
			
			<view class="con-view p-t-20" v-if="list.length">
				<view class="title-view p-l-40 p-b-10 f-30">
					<text class="m-r-10">{{params.data.storeName}}</text>
					<text>共：</text>
					<text class="m-r-10">{{totalObj.piecesCount}}匹</text>
					<text>{{totalObj.quantity}}</text>
				</view>
				<view class="dl-view f-30" v-for="item in list" :key="item.id">
					<view class="dd-view">
						<view class="name green">
							{{item.colorNumber}}
						</view>
						<view class="ul-view flex flex-sw">
							<view class="li-view blue">
								<text class="m-r-10">{{item.piecesCount}}匹</text>
								<text>{{item.quantity}}米</text>
							</view>
							<view class="li-view">
								<text class="m-r-10 grey">可发数</text>
								<text>19810</text>
							</view>
							<view class="li-view">
								<text class="m-r-10 grey">幅宽</text>
								<text>{{item.widthValue}}</text>
							</view>
							<view class="li-view">
								<text class="m-r-10 grey">克重</text>
								<text>{{item.gramWeightValue}}</text>
							</view>
							<view class="li-view">
								<text class="m-r-10 grey">库存模式</text>
								<text>{{item.billTypeNameIn}}</text>
							</view>
							<view class="li-view">
								<text class="m-r-10 grey">空差</text>
								<text></text>
							</view>
						</view>
						<view class="name">
							<text class="m-r-10 grey">净重数</text>
							<text></text>
						</view>
						<view class="name">
							<text class="m-r-10 grey">规格</text>
							<text>{{item.spec}}</text>
						</view>
						<view class="name">
							<text class="m-r-10 grey">缸号</text>
							<text>{{item.vatNo}}</text>
						</view>
						<view class="name">
							<text class="m-r-10 grey">批号</text>
							<text>{{item.sn}}</text>
						</view>
						<view class="name">
							<text class="m-r-10 grey">卷号</text>
							<text></text>
						</view>
						<view class="name">
							<text class="m-r-10 grey">仓位</text>
							<text></text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		<!-- 筛选弹框 -->
		<u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="close">
		    <view class="pop-view">
				<view class="">
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toWarehouse">
							<view class="title">
								仓库
							</view>
							<view class="value">
								{{sideObj.storeName}}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.storeName" @click="sideObj.storeName=''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toProduct">
							<view class="title">
								产品
							</view>
							<view class="value">
								{{sideObj.code}} {{sideObj.name}}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.name" @click="sideObj.name=''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toColor">
							<view class="title">
								色号
							</view>
							<view class="value">
								{{sideObj.colorNumber}}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.colorNumber" @click="sideObj.colorNumber=''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;">
							<view class="title">
								缸号
							</view>
							<view class="value">
								<u--input
								    placeholder=""
								    border="none"
								    v-model="sideObj.vatNo"
								  ></u--input>
							</view>
						</view>
					</view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;">
							<view class="title">
								条码
							</view>
							<view class="value">
								<u--input
								    placeholder=""
								    border="none"
								    v-model="sideObj.sn"
								  ></u--input>
							</view>
						</view>
					</view>
				</view>
		        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
		        	<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
					<u-button text="搜索" shape="circle" color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))" @click="onSearch"></u-button>
		        </view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import {stockQueryListPage} from '@/apis/inventory/inventory.js'
	export default {
		name: '',
		data() {
			return {
				config: {
				  title: "库存明细",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				show: false,
				params: {
					data: {},
					page: {
						current: 1,
						size: 999
					}
				},
				// 总数
				totalObj: {},
				list: [],
				// 侧边栏
				sideObj: {
					storeName: '',
					name: '',
					colorNumber: '',
					sn: '',
					vatNo: ''
				}
			}
		},
		methods: {
			// 删除图标
			onDel(type) {
				if(type=='storeName') {
					this.params.data.storeName = '';
					this.params.data.storeId = '';
				}
				if(type=='prod') {
					this.params.data.name = '';
					this.params.data.code = '';
					this.params.data.spuId = '';
				}
				if(type == 'color') {
					this.params.data.colorNumber = '';
					this.params.data.colorId = ''
				}
				if(type == 'spec') {
					this.params.data.spec = '';
				}
				this.params.page.current = 1;
				this.getList()
			},
			clickBtn(item) {
				if (item.key === "btn1") {
					this.show = true
				}
			},
			close() {
			  this.show = false
			  this.params.page.current = 1;
			  this.getList()
			  // console.log('close');
			},
			// 去选择仓库
			toWarehouse() {
				this.$Router.push({
				  path: "/pages/application/pages/information/warehouse/warehouse",
				  query: {
				    type: 'list'
				  }
				});
			},
			// 跳转产品
			toProduct() {
				uni.navigateTo({
					url: '/pages/application/pages/cloth/matching-inventory/inventory-product/index'
				})
			},
			// 跳转选择颜色
			toColor() {
				this.$Router.push({
				  path: "/pages/application/pages/cloth/color/index",
				  query: {
				    type: 'list',
					spuid: this.params.data.spuId
				  }
				});
			},
			// 跳转规格
			toSpec() {
				this.$Router.push({
				  path: "/pages/application/pages/cloth/specifications/index",
				  query: {
				    type: 'list',
					title: `${this.params.data.code} ${this.params.data.name}`,
					spuid: this.params.data.spuId
				  }
				});
			},
			// 获取列表
			getList() {
				let {
					colorId,
					spec,
					spuId,
					storeId,
					gramWeightValue,
					widthValue,
					unitId,
					name,
					code,
					vatNo,
					sn
				} = this.params.data;
				
				let param = {
					data: {
						colorId,
						spec,
						spuId,
						storeId,
						gramWeightValue,
						widthValue,
						unitId,
						name,
						code,
						vatNo,
						sn
					},
					page: this.params.page
				}
				uni.showLoading({
					title: '加载中'
				})
				stockQueryListPage(param).then(res=>{
					if(!res.flag) return;
					let {totalList, page} = res.data;
					this.totalObj = totalList||{};
					this.list = page.records;
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			
			// 搜索
			onSearch() {
				this.params.data = this.sideObj;
				this.close()
			},
			// 重置
			onReset() {
				this.sideObj = {
					storeName: '',
					name: '',
					colorNumber: '',
					sn: '',
					vatNo: ''
				}
			}
		},
		onShow() {
			// 库存
			uni.$on('data',(res)=>{
				let {name, id} = res;
				if(this.show) {
					this.sideObj.storeName = name;
					this.sideObj.storeId = id;
				} else {
					this.params.data.storeName = name;
					this.params.data.storeId = id;
					this.params.page.current = 1;
					this.getList()
				}
				uni.$off('data')
			})
			
			// 产品
			uni.$on('productData',(res)=>{
				let {name, code, id} = res;
				if(this.show) {
					this.sideObj.name = name;
					this.sideObj.code = code;
					this.sideObj.spuId = id;
				} else {
					this.params.data.name = name;
					this.params.data.code = code;
					this.params.data.spuId = id;
					this.params.page.current = 1;
					this.getList()
				}
				uni.$off('productData')
			})
			
			// 颜色
			uni.$on('on-color-data',(res)=>{
				let {colorNumber, id} = res;
				if(this.show) {
					this.sideObj.colorNumber = colorNumber;
					this.sideObj.colorId = id
				} else {
					this.params.data.colorNumber = colorNumber;
					this.params.data.colorId = id
					this.params.page.current = 1;
					this.getList()
				}
				uni.$off('on-color-data')
			})
			
			// 规格
			uni.$on('specData',(res)=>{
				this.params.data.spec = res.label;
				this.params.page.current = 1;
				this.getList()
				uni.$off('specData')
			})
		},
		mounted() {
			this.params.data = this.$Route.query.data;
			// console.error(this.$Route.query.data)
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.nav-view {
		background-color: #fff;
		height: 80rpx;
		color: #999;
		.inp-view {
			flex: 1;
			text-align: center;
			color: #333;
		}
	}
	.title-view {
		font-weight: bold;
		color: #333;
	}
	.dl-view {
		.dd-view {
			margin: 0 40rpx 40rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			align-items: center;
			.ul-view {
				flex-wrap: wrap;
				.li-view {
					// flex: 1;
					margin-bottom: 16rpx;
					width: 50%;
				}
			}
			.name {
				margin-bottom: 16rpx;
			}
		}
		
	}
	.green {
		color: #53c21d;
	}
	.blue {
		color: #409EFF;
	}
	.grey {
		color: #999;
	}
	.pop-view {
		width: 500rpx;
		padding-top: 88rpx;
		.cl-cell {
			height: 80rpx;
			border-bottom: 1rpx solid #efefef;
			padding: 0 20rpx 0 40rpx;
			.title {
				color: #999;
			}
			.value {
				flex: 1;
				overflow: hidden;
				height: 40rpx;
				color: #999;
				padding-left: 20rpx;
			}
		}
		.fot-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding-bottom: 20rpx;
		}
		.reset {
			color: #409eff;
			background-color: #e3edff;
		}
	}
	
</style>